<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
            color: orangered;
        }

        #box {
            width: 555px;
            height: 100px;
            margin: auto;
        }

        #box1 {
            width: 700px;
            height: 700px;
            display: flex;
            margin: auto;
            background-color: #3333330a;
            justify-content: space-between;
            flex-wrap: wrap
        }

        .box2 {
            width: 165px;
            height: 230px;
            border: 1px solid black;
            background-color: #33333324;
            border-radius: 15px;
            line-height: 5px;
            text-indent: 10px;
            -webkit-box-shadow: 12px 12px 5px -6px rgba(0, 0, 0, 0.68);
            -moz-box-shadow: 12px 12px 5px -6px rgba(0, 0, 0, 0.68);
            box-shadow: 12px 12px 5px -6px rgba(0, 0, 0, 0.68);
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <h1>商品列表</h1>

    <div id='box'>

        请输入链接：<input type="text" id="tu" placeholder="请输入">
        请输入名称：<input type="text" id="ming" placeholder="请输入">
        请输入价格：<input type="text" id="jiage" placeholder="请输入">
        请输入库存：<input type="text" id="ku" placeholder="请输入">
        请输入销量：<input type="text" id="xiaoliang" placeholder="请输入">
        请输入状态：<input type="text" id="zt" placeholder="请输入"><br>

        搜索：<input type="text" id="sou" placeholder="请输入">
        <button onclick="ss()">搜索</button>
        <button onclick="sx()">升序排列</button>
        <button onclick="jx()">降序排列</button>
        <button onclick="add()">添加商品</button>
    </div>

    <div id="box1">

    </div>

    <!-- 渲染 -->
    <script>
        var box1 = document.getElementById('box1')
        function fn() {
            var xhr = new XMLHttpRequest();

            xhr.open('get', 'https://liu.zzgoodqc.cn/goodsx/goodslist');

            xhr.send()

            xhr.onload = () => {
                var d = JSON.parse(xhr.response)
                box1.innerHTML = ''
                d.data.forEach((item,) => {
                    box1.innerHTML += `
                    <div class='box2'>
                        <img src='${item.img}'>
                        <p>名称：${item.goods_name}</p>
                        <p>价格：￥${item.price}</p>
                        <p>库存：${item.stock}</p>
                        <p>销量：${item.sold}</p>
                        <p>状态：${item.status === "1" ? "上架" : "下架"}
                            <button onclick="xq(${item.id})">详情页</button>
                        </p>
                        <button onclick="shang(${item.id})">上架</button>
                        <button onclick="xia(${item.id})">下架</button>
                       <button onclick="remove(${item.id})">删除</button>
                       
                    </div>
                    `
                });
               
            }
            xhr.onerror = (e) => {
                console.log(e);
            }
        }
        fn()

        // 删除
        function remove(id) {
            var xhr = new XMLHttpRequest();

            xhr.open('get', 'https://liu.zzgoodqc.cn/goodsx/delete?id=' + id);

            xhr.send()

            xhr.onload = () => {
                var d = JSON.parse(xhr.response)
                fn()
            }
            xhr.onerror = (e) => {
                console.log(e);
            }

        }

        // 添加
        function add() {
            let tu = document.getElementById('tu').value
            let ming = document.getElementById('ming').value
            let jiage = document.getElementById('jiage').value
            let ku = document.getElementById('ku').value
            let xiaoliang = document.getElementById('xiaoliang').value
            let zt = document.getElementById('zt').value

            var xhr = new XMLHttpRequest();

            xhr.open('post', 'https://liu.zzgoodqc.cn/goodsx/add');
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            var obj = {
                img: tu,
                goods_name: ming,
                price: jiage,
                stock: ku,
                sold: xiaoliang,
                status: zt
            }
            xhr.send(JSON.stringify(obj))

            xhr.onload = () => {
                var d = JSON.parse(xhr.response)
                fn()
            }
            xhr.onerror = (e) => {
                console.log(e);
            }
        }



        // 搜索
        function ss() {
            let sou = document.getElementById('sou').value;

            var xhr = new XMLHttpRequest();

            xhr.open('post', 'https://liu.zzgoodqc.cn/goodsx/search?goods_name=' + sou);

            xhr.send()

            xhr.onload = () => {
                var d = JSON.parse(xhr.response);

                d.data.forEach((item,) => {

                    box1.innerHTML = `
                    <div id='box2'>
                        <img src='${item.img}'>
                        <p>名称：${item.goods_name}</p>
                        <p>价格：￥${item.price}</p>
                        <p>库存：${item.stock}</p>
                        <p>销量：${item.sold}</p>
                        <p>状态：${item.status === "1" ? "上架" : "下架"}
                            <button onclick="xq(${item.id})">详情页</button>
                        </p>
                         <button onclick="shang(${item.id})">上架</button>
                        <button onclick="xia(${item.id})">下架</button>
                       <button onclick="remove(${item.id})">删除</button>
                      
                    </div>
                    `

                });

            }

            xhr.onerror = (e) => {
                console.log(e);
            }
        }

        // 跳转详情
        function xq(id) {
            window.location.assign("./详情页.html?id=" + id)
        }

      
        // 上架
        function shang(id) {
            var xhr = new XMLHttpRequest();

           
            xhr.open('get', 'https://liu.zzgoodqc.cn/goodsx/updateStatus?id=' + id + '&status=1');
            xhr.send();

            xhr.onload = () => {
                fn(); 
            };

            xhr.onerror = (e) => {
                console.log(e);
            };
        }


         // 下架
        function xia(id) {
            var xhr = new XMLHttpRequest();

            xhr.open('get', 'https://liu.zzgoodqc.cn/goodsx/updateStatus?id=' + id + '&status=2');
            xhr.send();

            xhr.onload = () => {
                fn();
            };

            xhr.onerror = (e) => {
                console.log(e);
            };
        }
    </script>

</body>

</html>